<template>
  <button @click="handleSwitch" :class="{ activeBtn: status }">
    <span>{{ status ? "开" : "关" }}</span>
  </button>
</template>
<script>
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    status: { type: Boolean, default: false },
  },
  setup(props, context) {
    const handleSwitch = () => {
      context.emit("update:status", !props.status);
    };
    return { handleSwitch };
  },
});
</script>

<style scoped lang="scss">
button {
  width: 70px;
  height: 30px;
  display: flex;
  align-items: center;
  border-radius: 30px;
  position: relative;
  background: grey;
  border: none;
  span {
    width: 24px;
    line-height: 24px;
    display: inline-block;
    border-radius: 50%;
    background: white;
    left: 2px;
    text-align: center;
    position: absolute;
    transition: left 300ms;
  }
  &:focus {
    outline: none;
  }
}
@keyframes QQ {
  0% {
    width: 24px;
  }
  25% {
    width: 30px;
  }
  50% {
    width: 24px;
  }
  75% {
    width: 30px;
  }
  100% {
    width: 24px;
  }
}
.activeBtn {
  background: #0082fc;
  span {
    left: 44px;
    animation: 300ms alternate QQ;
  }
}
</style>
